expose-loader

作用：

暴露全局变量为window属性。

API：https://github.com/webpack-contrib/expose-loader

安装：

npm install expose-loader --save-dev

使用：

注意与externals参数配置是不同的：

externals:{
    jquery:"window.$"
}

这样做是为了让以CDN引入的第三方插件直接调用，而不需要重复打包到bundle里。

而expose-loader则是以window属性的方式全局暴露一些方法或对象。对于jquery：

import "expose-loader?$!jquery"; //已安装jquery和expose-loader

这样，在浏览器控制台就可以以window.$的方式调用jquery。也可以这样配置：

rules:[
    {
        test:require.resolve('jquery'),
        use:[
            {
                loader:'expose-loader',
                options:'$'
            }
        ]
    }
]

但，以这种方式处理第三方库没什么意义。更多的我想应该是暴露一些静态配置数据以便共享，比如对象、json：

//config.js

const CONFIG = {
    name:"Geralt"
}

export default CONFIG;

//比如入口文件配置
import 'expose-loader?configData!./config.js';

这样，在其它文件可以通过window.configData来访问。

注意，如果以export default导出，那么window.configData.default才是真正的数据；否则以export {}导出，则window.configData下的属性名也会对应变化。出于这个问题，对于配置数据，以json的方式配置要更好一点：

{
    "name":"Geralt"
}

import 'expose-loader?configData!./config.json';

JSON.stringify(window.configData) === JSON.stringify({name:"Geralt"})

总结：

expose-loader既可以处理第三方库，也可以处理如js、json等，但感觉比较适合将json配置，暴露为window属性。